<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			/* dev */
			body{
				background: pink;
			}
			#box{
				width: 800px;
				margin: 10px auto;
			}
			.d1{
				margin-bottom: 20px;
			}
			.d1>div{
				margin-bottom: 10px;
			}
			.d1 label{
				margin: 0 10px;
			}
			.d1 button{
				padding: 4px 10px;
				margin-left: 10px;
			}
			table{
				width: 100%;
				border-collapse: collapse;
				text-align: center;
			}
			table th,
			table td{
				border: 1px solid skyblue;
				padding: 4px 0;
			}
			.but{
				width: 20px;
				cursor: pointer;
			}
			#num{
				display: inline-block;
				margin: 0 6px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="d1">
				<div>
					<label>产品名称</label>
					<select>
						<option value="0" selected>冰箱</option>
						<option value="1">手机</option>
						<option value="2">电脑</option>
						<option value="3">电视</option>
					</select>
				</div>
				<div>
					<label for="price">产品单价</label>
					<input type="text" id="price" placeholder="请输入产品价格">
				</div>
				<div>
					<button type="button" class="btn">添加</button>
				</div>
			</div>
			<div class="d2">
				<table border="1">
					<thead>
						<tr>
							<th>产品编号</th>
							<th>产品名称</th>
							<th>产品数量</th>
							<th>产品单价</th>
							<th>总价</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<!-- <tr>
							<td></td>
							<td></td>
							<td>
								<button type="button" class="but" onclick="changeFn()">-</button>
								<span id="num">5</span>
								<button type="button" class="but" onclick="changeFn()">+</button>
							</td>
							<td></td>
							<td></td>
							<td>
								<button type="button" onclick="del()">删除</button>
							</td>
						</tr>
						<tr>
							<td>商品总价</td>
							<td colspan="5"></td>
						</tr> -->
					</tbody>
				</table>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		/* 获取DOM */
		var sel = document.querySelector("select");
		var price = document.querySelector("#price");
		var btn = document.querySelector(".btn");
		var tbody = document.querySelector("tbody");
		
		/* 本地存储 */
		if(localStorage.arr0721){
			var arr = JSON.parse(localStorage.arr0721);
		}else{
			var arr = [];
			localStorage.arr0721 = JSON.stringify([]);
		}
		/* 渲染数据 */
		show(arr);
		
		
		/* 点击事件 */
		btn.onclick = function(){
			/* 如果商品已经添加就不再添加 */
			var index = arr.findIndex(function(v){
				return v.sel == sel.value;
			})
			if(index>=0){
				alert(selFn(sel.value)+"已上架!!");
				sel.value = "0";
				price.value = "";
				return;
			}
			
			if(price.value){
				var obj = {
					sel:sel.value,
					price:price.value,
					priceNum:1,
					id:+new Date()
				}
				arr.push(obj);
				show(arr);
				localStorage.setItem("arr0721",JSON.stringify(arr));
				sel.value = "0";
				price.value = "";
			}else{
				alert("请输入单价");
			}
			
		}
		
		/* 渲染数据 */
		function show(arr){
			tbody.innerHTML = "";
			for(var i=0;i<arr.length;i++){
				tbody.innerHTML += `
					<tr>
						<td>${i+1}</td>
						<td>${selFn(arr[i].sel)}</td>
						<td>
							<button type="button" class="but" onclick="changeFn(this,${arr[i].id})">-</button>
							<span>${arr[i].priceNum}</span>
							<button type="button" class="but" onclick="changeFn(this,${arr[i].id})">+</button>
						</td>
						<td>${arr[i].price}元</td>
						<td>${arr[i].priceNum*arr[i].price}元</td>
						<td>
							<button type="button" onclick="del(${arr[i].id})">删除</button>
						</td>
					</tr>
				`;
			}
			tbody.innerHTML += `
				<tr>
					<td>商品总价</td>
					<td colspan="5" class="sum"></td>
				</tr>
			`;
			sumFn();
		}
		
		/* 删除数据 */
		function del(id){
			var index = arr.findIndex(function(v){
				return v.id == id;
			})
			arr.splice(index,1);
			show(arr);
			localStorage.arr0721 = JSON.stringify(arr);
		}
		
		/* 下拉数据处理 */
		function selFn(t){
			var arr1 = ["冰箱","手机","电脑","电视"];
			return arr1[t-0];
		}
		
		/* 加减 */
		function changeFn(self,id){
			if(self.innerHTML == "-"){
				for(var n=0;n<arr.length;n++){
					if(arr[n].id == id){
						if(arr[n].priceNum == "1"){
							var f = confirm("当前商品数量为1,是否删除此商品吗?");
							if(f){
								arr.splice(arr.findIndex(function(item){
									return item.id == id;
								}),1);
							}
						}else{
							arr[n].priceNum--;
						}
						break;
					}
				}
			}else if(self.innerHTML == "+"){
				for(var m=0;m<arr.length;m++){
					if(arr[m].id == id){
						arr[m].priceNum++;
						break;
					}
				}
			}
			show(arr);
			localStorage.arr0721 = JSON.stringify(arr);
		}
		
		/* 商品总价 */
		function sumFn(){
			var sum = document.querySelector(".sum");
			var sumStr = 0;
			for(var i=0;i<arr.length;i++){
				sumStr += arr[i].price*arr[i].priceNum;
			}
			sum.innerHTML = sumStr+"元";
		}
		
	</script>
</html>
